<script lang="ts" setup>
import BuildingRechargeChart from "@/views/charts/building-recharge-chart.vue"
import BuildingUseChart from "@/views/charts/building-use-chart.vue"
import HourSegmentUseChart from "@/views/charts/hour-segment-use-chart.vue"
import OrganizationUseChart from "@/views/charts/organization-use-chart.vue"
import * as electricitydataanalysisservice from "@/assets/api/electricitydataanalysisservice_0_0_1";
import { reactive } from "vue";
import { BuildingRechargeInfo, RoomEnergyStatus } from "@/assets/api/electricitydataanalysisservice_0_0_1";


const data = reactive<{
    room_num: number,
    occupied_num: number,

    order_num: number,
    order_amount: number,
    building_recharge_datas: Array<BuildingRechargeInfo>,

    page_index: number,
    page_size: number,
    total_number: number,

    room_energy_status_datas: Array<RoomEnergyStatus>,

    building_use_datas: Array<electricitydataanalysisservice.BuildingUseInfo>,
    hour_segment_use_datas: Array<electricitydataanalysisservice.HourSegmentUseInfo>,
    organization_use_datas: Array<electricitydataanalysisservice.OrganizationUseInfo>,

}>({
    room_num: 0,
    occupied_num: 0,
    order_num: 0,
    order_amount: 0,
    building_recharge_datas: [],

    page_index: 0,
    page_size: 0,
    total_number: 0,
    room_energy_status_datas: [],

    building_use_datas: [],
    hour_segment_use_datas: [],
    organization_use_datas: [],
});

const getBuildingInfo = async () => {
    const res = await electricitydataanalysisservice.GetBuildingInfo();
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    
    if (res.data) {
        //  数据存在
        data.room_num = res.data.room_num;
        data.occupied_num = res.data.occupied_num;
    }
    // 1s  调用一次
    setTimeout(() => {
        getBuildingInfo();
    }, 500);
};

const getBuildingRechargeInfo = async () => {
    const res = await electricitydataanalysisservice.GetBuildingRechargeInfo();
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        //  数据存在
        data.order_num = res.data.order_num;
        data.order_amount = res.data.order_amount;
        data.building_recharge_datas = res.data.building_recharge_datas;
    }
    // 1s  调用一次
    setTimeout(() => {
        getBuildingRechargeInfo();
    }, 500);
};

const getRoomEnergyStatus = async () => {
    const res = await electricitydataanalysisservice.GetRoomEnergyStatus({
        page_index: data.page_index,
        page_size: 10
    });
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        //  数据存在
        data.page_index = res.data.page_index;
        data.page_size = res.data.page_size;
        data.total_number = res.data.total;
        data.room_energy_status_datas = res.data.datas;
        const total_page = Math.floor((res.data.total + data.page_size - 1) / data.page_size);
        let next_page = data.page_index + 1
        if (next_page > total_page) {
            data.page_index = 1;
        } else {
            data.page_index = next_page;
        }
    }
    // 1s  调用一次
    setTimeout(() => {
        getRoomEnergyStatus();
    }, 1000);
};


const getUseInfo = async () => {
    const res = await electricitydataanalysisservice.GetUseInfo();
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        //  数据存在
        data.building_use_datas = res.data.building_use_datas;
        data.hour_segment_use_datas = res.data.hour_segment_use_datas;
        data.organization_use_datas = res.data.organization_use_datas;
    }
    // 1s  调用一次
    setTimeout(() => {
        getUseInfo();
    }, 500);
};


const init = async () => {
    await electricitydataanalysisservice.SubscribeData();

    getBuildingInfo();
    getBuildingRechargeInfo();
    getRoomEnergyStatus();
    getUseInfo();
}

init()

</script>

<template>
    <!-- 给当前也设置一个类名 -->
    <div class="new-page">
        <!-- 创建标题栏 -->
        <div class="header vertical-layout-center">
            <span>2024年秋季学期宿舍用电数据</span>
        </div>

        <div class="left-wrapper">
            <div class="left-container">
                <building-recharge-chart :building_recharge_datas="data.building_recharge_datas" />
            </div>
            <div class="left-container">
                <building-use-chart :building_use_datas="data.building_use_datas" />
            </div>

        </div>
        <div class="center-wrapper">
            <div class="center-container">
                <div class="data-bar horzontal-center-layout">
                    <span class="flex-1" />
                    <div class="data-column vertical-layout-center">
                        <span>房间数量</span>
                        <span class="value">{{ data.room_num }}</span>
                    </div>
                    <span class="flex-1" />
                    <div class="data-column vertical-layout-center">
                        <span>入住人数</span>
                        <span class="value">{{ data.occupied_num }}</span>
                    </div>
                    <span class="flex-1" />
                </div>
                <div class="data-bar horzontal-center-layout">
                    <span class="flex-1" />
                    <div class="data-column vertical-layout-center">
                        <span>充值订单</span>
                        <span class="value">{{ data.order_num }}</span>
                    </div>
                    <span class="flex-1" />
                    <div class="data-column vertical-layout-center">
                        <span>充值金额</span>
                        <span class="value">{{ data.order_amount.toFixed(2) }}</span>
                    </div>
                    <span class="flex-1" />
                </div>
            </div>

            <div class="center-container">
                <el-table :data="data.room_energy_status_datas" style="width: 100%;height: 100%;">
                    <!-- 定义列，其中 prop 中的值要和tableData 中一致， label： 表头的名字，width： 列宽 -->
                    <el-table-column prop="room_name" label="宿舍名" width="100" />
                    <el-table-column prop="update_time" label="充值时间" width="180" />
                    <el-table-column prop="used" label="已经电量">
                        <template #default="scope">
                            <span>{{ scope.row.used.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remaining" label="剩余电量">
                        <template #default="scope">
                            <span>{{ scope.row.remaining.toFixed(2) }}</span>
                        </template>

                    </el-table-column>
                    <el-table-column prop="free" label="免费电量">
                        <template #default="scope">
                            <span>{{ scope.row.free.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="right-wrapper">
            <div class="right-container">
                <organization-use-chart :organization_use_datas="data.organization_use_datas" />
            </div>
            <div class="right-container">
                <hour-segment-use-chart :hour_segment_use_datas="data.hour_segment_use_datas" />
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.new-page {
    // 设置为绝对定位
    position: absolute;
    // 距离 左边距、右边距、上边距、下边距 都为 0，目标是要让当前页面铺满窗口
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // 设置背景图片
    background-image: url('@/assets/img/201.png');
    // 然后图片铺满窗口
    background-size: cover;
    background-position: center;
    // 背景图片不随页面滚动而滚动
    background-attachment: fixed;

    .header {
        -webkit-app-region: drag;
        height: vh(80);
        color: rgb(255, 255, 255);
        font-size: vw(30);
        line-height: vh(80);
        font-weight: bold;
        background-image: url('@/assets/img/header-line.png');
        // background-position: center bottom;
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        span {
            position: relative;
            top: vh(-2);
        }
    }

    // 分割符号，用于做间距的
    .spliter {
        // 转换函数
        width: vw(10);
    }


    .left-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        left: 0;
        // 设置不设置高度，将底部距离设置 为 0 表示，占用剩余空间
        bottom: 0;
        width: vw(400);
    }

    .left-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(420);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);
    }

    .right-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(420);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .center-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(414);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .conatiner {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(420);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .center-wrapper {
        position: absolute;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        left: vw(410);
        width: vw(612);
        bottom: 0;

        .year-revenu {
            font-size: vw(18);
            position: absolute;
            left: 50%;
            margin-left: vh(-125);
            color: #ffffff;
            top: vh(10);
            width: vh(250);
            height: vh(250);
            background: url('@/assets/img/circle-bk.png');
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .value {
                font-size: vw(24);
                margin-top: vh(10);
            }
        }

        .data-bar {
            margin-top: vh(10);

        }

        .data-column {
            font-size: vw(16);
            width: vh(300);
            height: vh(200);
            padding-bottom: vh(20);
            color: rgb(255, 200, 0);
            background: url('@/assets/img/2.png');
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .value {
                margin-top: vh(40);
                font-size: vw(30);
                margin-bottom: vh(10);
            }
        }
    }

    .right-wrapper {
        position: absolute;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        // 设置不设置高度，将底部距离设置 为 0 表示，占用剩余空间
        bottom: 0;
        right: 0;
        width: vw(400);
    }

    :deep(.el-table) {
        background: transparent;

        .el-table__header-wrapper {
            background: transparent;

        }

        .el-table__header {
            background: #fab800;
        }

        .el-table__inner-wrapper {
            &::before {
                display: none;
            }
        }

        tr,
        th {
            background: transparent;
        }

        .cell {
            color: white;
        }

        th,
        tr,
        td {
            border-bottom: 1px solid #efe03d;
        }

        .el-table__row {
            &:hover {
                td {
                    background: #f0fa34;
                }

            }

        }
    }
}
</style>